<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/WEB-INF/plantilla/plantilla.xhtml">
	<ui:define name="contenido">

				<h:form id="form">

					<p:dataTable var="empleado" value="#{verBean.verDirectorioList}"
						rowKey="#{empleado.documento}" paginator="true" rows="10"
						selection="#{verBean.selectedEmpleado}" selectionMode="single"
						filteredValue="#{verBean.filteredEmpleado}" id="empleadoTable">

						<p:ajax event="rowSelect" update=":form:display"
							oncomplete="empleadoDialog.show()" />

						<f:facet name="header">
							<h:outputLabel value="Contratistas"></h:outputLabel>
				        </f:facet>

						<p:column headerText="Documento" sortBy="#{empleado.documento}"
									filterBy="#{empleado.documento}" id="documento">
				            #{empleado.documento}
				        </p:column>

						<p:column headerText="Nombre" sortBy="#{empleado.nombreCompleto}"
									filterBy="#{empleado.nombreCompleto}" id="nombre">
				            #{empleado.nombreCompleto}
				        </p:column>

						<p:column headerText="Dependencia" sortBy="#{empleado.nombreDependencia}"
									filterBy="#{empleado.nombreDependencia}" id="dependencia">
				            #{empleado.nombreDependencia}
				        </p:column>

						<p:column headerText="Cargo" sortBy="#{empleado.cargo}"
									filterBy="#{empleado.cargo}" id="cargo">
				            #{empleado.cargo}"
				        </p:column>

						<p:column headerText="Dirección" sortBy="#{empleado.direccion}"
									filterBy="#{empleado.direccion}" id="direccion">
				            #{empleado.direccion}"
				        </p:column>

						<p:column headerText="Teléfono" sortBy="#{empleado.telefono}"
									filterBy="#{empleado.telefono}" id="telefono">
				            #{empleado.telefono}"
				        </p:column>

					</p:dataTable>

					<p:dialog header="Detalle Contratista" widgetVar="empleadoDialog" resizable="false"
						width="400" showEffect="explode" hideEffect="explode">

						<h:panelGrid id="display" columns="2" cellpadding="4">

							<f:facet name="header">
								<p:graphicImage value="/resources/img/#{verBean.selectedEmpleado.documento}.jpg" />
							</f:facet>

							<h:outputText value="Documento:" />
							<h:outputText value="#{verBean.selectedEmpleado.documento}" id="documento" />

							<h:outputText value="Nombre:" />
							<h:outputText value="#{verBean.selectedEmpleado.nombreCompleto}" id="nombre" />

							<h:outputText value="Dependencia:" />
							<h:outputText value="#{verBean.selectedEmpleado.nombreDependencia}" id="dependencia" />

							<h:outputText value="Cargo:" />
							<h:outputText value="#{verBean.selectedEmpleado.cargo}" id="cargo" />
						</h:panelGrid>
					</p:dialog>

				</h:form>

<!-- 		<h:form prependId="false"> -->

<!-- 			<p:dataTable id="dataTable" var="emp" value="#{verBean.verDirectorioList}" -->
<!-- 				paginator="true" rows="10" -->
<!-- 				paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" -->
<!-- 				rowsPerPageTemplate="5,10,15"> -->
<!-- 				<f:facet name="header"> -->
<!--             Empleados / Contratistas -->
<!--         </f:facet> -->

<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Documento" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.documento}" /> -->
<!-- 				</p:column> -->

<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Nombre" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.nombreEmpleado}" /> -->
<!-- 				</p:column> -->

<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Dependencia" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.nombreDependencia}" /> -->
<!-- 				</p:column> -->

<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Cargo" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.cargo}" /> -->
<!-- 				</p:column> -->

<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Dirección" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.direccion}" /> -->
<!-- 				</p:column> -->


<!-- 				<p:column> -->
<!-- 					<f:facet name="header"> -->
<!-- 						<h:outputText value="Teléfono" /> -->
<!-- 					</f:facet> -->
<!-- 					<h:outputText value="#{emp.telefono}" /> -->
<!-- 				</p:column> -->
				
<!-- 			</p:dataTable> -->

<!-- 		</h:form> -->


	</ui:define>
</ui:composition>
</html>